<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        #title {
            line-height: 40px;
            height: 40px;
        }

        .list li {
            height: 32px;
            line-height: 32px;
            border: 1px dashed #333;
        }

        .list li+li {
            border-top: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h3 id="title">dom操作封装</h3>
        <ul class="list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </ul>
    </div>
</body>
<script>
    // dom操作
    // 简单的来说 对文档(html页面)上的元素进行增删改查 还有获取元素,修改元素的内容, 属性, 样式 ,绑定事件


    // DOM操作封装 => 按功能封装

    // 面向对象
    // 字面量对象
    /* var getEle = {
        list: document.querySelectorAll(".list li"),
        getText: function () {
            // this -> getEle
            return this.list[0].textContent;
        },
        setText: function (con) {
            // this -> getEle
            for (var i = 0; i < this.list.length; i++) {
                var ele = this.list[i];
                ele.textContent = con;
            }
        }
    }

    getEle.setText(33333); */

    // selector 传入一个css选择器 => 根据传入的选择器获取元素
    /* function getEle(selector) {
        var obj = {
            list: document.querySelectorAll(selector),
            getText: function () {
                // this -> getEle
                return this.list[0].textContent;
            },
            setText: function (con) {
                // this -> getEle
                for (var i = 0; i < this.list.length; i++) {
                    var ele = this.list[i];
                    ele.textContent = con;
                }
            }
        }
        return obj;
    }


    var res1 = getEle(".list li");
    res1.setText("33333");
    var res2 = getEle("#title");
    res2.setText("44444"); */


    // 构造函数

    function GetEle(selector) {
        // {} 
        // {}[[Prototype]] = GetEle.prototype;
        // this -> {}

        // 把获取的元素集合存储到实例化对象中
        var list = document.querySelectorAll(selector);  // {}.list=[li,li,li,li]

        // list是伪数组 -> 有自己的原型属性[[Prototype]]指向,且改变原型属性指向后 数组结构不存在

        list = Array.from(list); // 转真数组 => 赋值原值

        Object.setPrototypeOf(list, GetEle.prototype); // 既保留数组结构,又能使用GetEle.prototype的方法

        return list;  // list = [li,li,li,li]
    }

    // GetEle.prototype.getText = function () {
    //     // this -> 调用此方法的实例化对象   list=[li,li,li,li]
    //     return this[0].textContent;
    // }
    // GetEle.prototype.setText = function (con) {
    //     // this -> 调用此方法的实例化对象   list=[li,li,li,li]
    //     for (var i = 0; i < this.length; i++) {
    //         var ele = this[i];
    //         ele.textContent = con;
    //     }
    // }

    // text()  获取和设置实例化对象(集合)中的元素的text内容
    // text("11111")  => 有内容就设置
    // text()         => 没有内容就获取
    GetEle.prototype.text = function (con) {
        // this -> 调用此方法的实例化对象   list=[li,li,li,li]
        // arguments -> 函数调用时实际参数的集合   lenth-> 参数的个数
        if (arguments.length >= 1) { // 有至少一个参数 就设置
            // for (var i = 0; i < this.length; i++) {
            //     var ele = this[i];
            //     ele.textContent = con;
            // }

            // this -> 调用此方法的实例化对象 -> 可以使用GetEle.prototype上所有的方法
            this.each((ele, i) => {
                ele.textContent = con;
            })

        } else { // 没有参数  获取
            return this[0].textContent;
        }
    }

    // html()  获取和设置实例化对象(集合)中的元素的html内容
    // html("11111")  => 有内容就设置
    // html()         => 没有内容就获取
    GetEle.prototype.html = function (con) {
        // this -> 调用此方法的实例化对象   list=[li,li,li,li]
        // arguments -> 函数调用时实际参数的集合   lenth-> 参数的个数
        if (arguments.length >= 1) { // 有至少一个参数 就设置
            // for (var i = 0; i < this.length; i++) {
            //     var ele = this[i];
            //     ele.innerHTML = con;
            // }

            this.each((ele, i) => {
                ele.innerHTML = con;
            })
        } else { // 没有参数  获取
            return this[0].innerHTML;
        }
    }


    // val()  获取和设置实例化对象(集合)中的元素的val内容
    // val("11111")  => 有内容就设置
    // val()         => 没有内容就获取
    GetEle.prototype.val = function (con) {
        // this -> 调用此方法的实例化对象   list=[li,li,li,li]
        // arguments -> 函数调用时实际参数的集合   lenth-> 参数的个数
        if (arguments.length >= 1) { // 有至少一个参数 就设置
            // for (var i = 0; i < this.length; i++) {
            //     var ele = this[i];
            //     ele.value = con;
            // }
            this.each((ele, i) => {
                ele.value = con;
            })
        } else { // 没有参数  获取
            return this[0].value;
        }
    }

    // hide()   将实例化对象(集合)中的元素隐藏
    // show()   将实例化对象(集合)中的元素隐藏


    GetEle.prototype.hide = function (con) {
        // this -> 调用此方法的实例化对象   list=[li,li,li,li]
        // for (var i = 0; i < this.length; i++) {
        //     var ele = this[i];
        //     ele.style.display = "none";
        // }
        this.each((ele, i) => {
            ele.style.display = "none";
        })

    }

    GetEle.prototype.show = function (con) {
        // this -> 调用此方法的实例化对象   list=[li,li,li,li]
        // for (var i = 0; i < this.length; i++) {
        //     var ele = this[i];
        //     ele.style.display = "block";
        // }

        this.each((ele, i) => {
            ele.style.display = "block";
        })
    }

    // 封装的遍历方法
    GetEle.prototype.each = function (callback) { // 形参callback接收了一个函数
        // this -> 调用此方法的实例化对象   list=[li,li,li,li]
        // var callback = function (item, index, array) {  // 传入的函数
        //     console.log(item, index, array);
        // }

        // 每次循环执行传入的函数
        for (var i = 0; i < this.length; i++) {
            // this[i]
            // i
            // this
            callback(this[i], i, this);
        }

    }

    // 传入一个csss选择器 根据传入的参数快速获取实例化对象
    function $(selector) {  //  ".list li"
        return new GetEle(selector);  // new GetEle(".list li")
    }

    $(".list li").text("hello");
    $("#title").hide();


















</script>

</html>